﻿<%@ Page Title="" Language="C#" MasterPageFile="~/Wijmo.Master" AutoEventWireup="true" CodeBehind="Position.aspx.cs" Inherits="ControlExplorer.C1ToolTip.Position" %>

<%@ Register Namespace="C1.Web.Wijmo.Controls.C1ToolTip" Assembly="C1.Web.Wijmo.Controls.3" TagPrefix="wijmo" %>
<asp:Content ID="Content1" ContentPlaceHolderID="Head" runat="server">
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="MainContent" runat="server">
    <asp:HyperLink ID="HyperLink1" Style="color: red; font-weight: bold;" runat="server" ToolTip="tooltip">tooltip</asp:HyperLink>
    <wijmo:C1ToolTip runat="server" ID="Tooltip1" TargetSelector="#HyperLink1" CloseBehavior="Sticky">
    </wijmo:C1ToolTip>
</asp:Content>
<asp:Content ID="Content3" ContentPlaceHolderID="Description" runat="server">
    <p>
       此示例演示如何使用<strong>position</strong>选项来改变工具提示出现。</p>
    <p>
       此示例中客户端的<strong>position</strong> 属性来改变工具提示的位置。</p>
    <p>
       在下拉列表中选择一个位置，并单击<strong>apply</strong>按钮，然后悬停在链接工具提示的位置。</p>
</asp:Content>
<asp:Content ID="Content4" ContentPlaceHolderID="ControlOptions" runat="server">
    <div style="height: 70px">
        <div style="width: 180px; float: left;">
            <span style="padding-right: 10px;">我的:</span><select id="my1">
                <option value="left">左</option>
                <option value="center">中</option>
                <option value="right">右</option>
            </select>
            <select id="my2">
                <option value="top">顶部</option>
                <option value="center">中部</option>
                <option value="bottom" selected="selected">底部</option>
            </select>
            <br />
            <span style="padding-right: 14px;">位于:</span><select id="at1">
                <option value="left">左</option>
                <option value="center">中</option>
                <option value="right" selected="selected">右</option>
            </select>
            <select id="at2">
                <option value="top">顶部</option>
                <option value="center">中部</option>
                <option value="bottom">底部</option>
            </select>
        </div>
    </div>
    <input type="button" onclick="applyPosition();" value="应用" />
    <script id="scriptInit" type="text/javascript">
        function applyPosition() {
            $("#<%=HyperLink1.ClientID %>").c1tooltip("option", "position", { my: $("#my1").val() + " " + $("#my2").val(), at: $("#at1").val() + " " + $("#at2").val() });
        };
    </script>
</asp:Content>
